<template>
  <div id="material-manage">
    <ContentField>
      <template v-slot:content-field-card-name>食材管理</template>
      <template v-slot:content-field-card-button>
        <div id="material-manage-btn-group">
          <el-button type="success" round @click="addMaterialBtnClick"
            >增添食材</el-button
          >
        </div>
      </template>
      <template v-slot:content-field-card-body>
        <div id="material-manage-body" style="position: relative">
          <el-table
            :data="material_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="name" label="食材名" />
            <el-table-column prop="num" label="库存量" />
            <el-table-column prop="createTime" label="生产日期" />
            <el-table-column prop="guaranteePeriod" label="保质期" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="editMaterialBtnClick(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="deleteMaterialBtnClick(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
    <!-- 食材信息编辑dialog -->
    <el-dialog v-model="materialAddDialogVisible" title="添加食材">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curMaterial"
        style="max-width: 460px"
      >
        <el-form-item label="名称">
          <el-input v-model="curMaterial.name" />
        </el-form-item>
        <el-form-item label="库存量">
          <el-input v-model="curMaterial.num" />
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input v-model="curMaterial.createTime" :suffix-icon="Calendar" />
        </el-form-item>
        <el-form-item label="保质期">
          <el-input v-model="curMaterial.guaranteePeriod" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="materialAddDialogSubBtnClick">
            确定增添
          </el-button>
          <el-button @click="materialAddDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 食材信息编辑dialog -->
    <el-dialog v-model="materialEditDialogVisible" title="食材详情">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curMaterial"
        style="max-width: 460px"
      >
        <el-form-item label="名称">
          <el-input v-model="curMaterial.name" />
        </el-form-item>
        <el-form-item label="库存量">
          <el-input v-model="curMaterial.num" />
        </el-form-item>
        <el-form-item label="生产日期">
          <el-input v-model="curMaterial.createTime" :suffix-icon="Calendar" />
        </el-form-item>
        <el-form-item label="保质期">
          <el-input v-model="curMaterial.guaranteePeriod" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="materialEditDialogSubBtnClick">
            提交修改
          </el-button>
          <el-button @click="materialEditDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 食材删除dialog -->
    <el-dialog
      v-model="materialDeleteDialogVisible"
      title="Tips"
      width="30%"
      draggable
    >
      <span>您正在删除食材，请谨慎操作！</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="materialDeleteDialogVisible = false"
          >
            取消
          </el-button>
          <el-button type="danger" @click="materialDeleteDialogConfirmBtnClick">
            确定删除
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, ref, reactive } from "vue";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Calendar,
} from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();
    // 获取食材列表
    store.dispatch("get_all_material", {
      token: store.state.user.jwt_token,
    });
    // 绑定食材列表
    let material_list = computed(() => {
      return store.state.material.material_list;
    });
    // 增添dialog的显示与隐藏
    let materialAddDialogVisible = ref(false);
    // 编辑dialog的显示与隐藏
    let materialEditDialogVisible = ref(false);
    // 删除dialog的显示与隐藏
    let materialDeleteDialogVisible = ref(false);
    // 当前操作的食材
    let curMaterial = reactive({});
    // 将当前操作的食材信息与dialog绑定
    let bindCurMaterial = (material) => {
      curMaterial.id = material.id;
      curMaterial.name = material.name;
      curMaterial.num = material.num;
      curMaterial.createTime = material.createTime;
      curMaterial.guaranteePeriod = material.guaranteePeriod;
    };
    let clearCurMaterial = () => {
      curMaterial.id = "";
      curMaterial.name = "";
      curMaterial.num = "";
      curMaterial.createTime = "";
      curMaterial.guaranteePeriod = "";
    };
    // 调出dialog并绑定数据
    let addMaterialBtnClick = () => {
      // 清空当前原材料信息
      clearCurMaterial();
      materialAddDialogVisible.value = true;
    };
    let editMaterialBtnClick = (material) => {
      bindCurMaterial(material);
      materialEditDialogVisible.value = true;
    };
    let deleteMaterialBtnClick = (material) => {
      bindCurMaterial(material);
      materialDeleteDialogVisible.value = true;
    };

    // 增添dialog 提交按钮点击事件
    let materialAddDialogSubBtnClick = () => {
      store.dispatch("add_material_info", {
        token: store.state.user.jwt_token,
        material: curMaterial,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "食材增添成功",
              offset: 100,
            });
            // 重新获取食材列表
            store.dispatch("get_all_material", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "食材增添失败: " + data.message,
              offset: 100,
            });
          }
          materialAddDialogVisible.value = false;
        },
        error(data) {
          console.log(data);
        },
      });
    };

    // 编辑dialog 提交按钮点击事件
    let materialEditDialogSubBtnClick = () => {
      store.dispatch("modify_material_info", {
        token: store.state.user.jwt_token,
        material: curMaterial,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "食材信息修改成功",
              offset: 100,
            });
            // 重新获取食材列表
            store.dispatch("get_all_material", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "食材信息修改失败: " + data.message,
              offset: 100,
            });
          }
          materialEditDialogVisible.value = false;
        },
        error(data) {
          console.log(data);
        },
      });
    };

    // 确定删除
    let materialDeleteDialogConfirmBtnClick = () => {
      store.dispatch("delete_material_info", {
        token: store.state.user.jwt_token,
        id: curMaterial.id,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "食材删除成功",
              offset: 100,
            });
            // 重新获取食材列表
            store.dispatch("get_all_material", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "食材删除失败: " + data.message,
              offset: 100,
            });
          }
          materialDeleteDialogVisible.value = false;
        },
        error(data) {
          console.log(data);
        },
      });
    };

    return {
      Check,
      Delete,
      Edit,
      Message,
      Search,
      Star,
      Calendar,
      store,
      material_list,
      addMaterialBtnClick,
      editMaterialBtnClick,
      deleteMaterialBtnClick,
      materialAddDialogVisible,
      materialEditDialogVisible,
      materialDeleteDialogVisible,
      materialAddDialogSubBtnClick,
      materialEditDialogSubBtnClick,
      materialDeleteDialogConfirmBtnClick,
      curMaterial,
    };
  },
};
</script>

<style scoped></style>
